<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/css/layui.css">
    <script src="/webjars/layui.js"></script>
</head>
<body>
<div style="margin: 20px 10px;">
    <div style="height: 150px; border: 1px solid bisque;">
        <div class="layui-form-item" style="margin-top: 50px;">
            <label class="layui-form-label">期数</label>
            <div class="layui-input-inline">
                <input type="text" name="numOfPeriods" id="numOfPeriods" placeholder="请输入用户名" autocomplete="off"
                       class="layui-input">
            </div>

            <div style="float: right; margin-right: 50px;">
                <button class="layui-btn layui-btn-normal" data-type="clear" id="clear_button">清空</button>
                <button class="layui-btn layui-btn-normal" data-type="syncRemote" id="sync_remote_button">同步远程</button>
                <button class="layui-btn layui-btn-normal" data-type="reload" id="search_button">搜索</button>
            </div>
        </div>
    </div>
    <div>
        <table id="demo" lay-filter="test"></table>
    </div>
</div>
<script type="text/javascript" th:inline="none">
    layui.use(['table', 'form', 'element', 'layer'], function () {
        let table = layui.table;
        let form = layui.form;
        let element = layui.element;

        //第一个实例
        table.render({
            elem: '#demo'
            //,height: 312
            , url: '/api/lottery/history/page' //数据接口
            , method: 'get'
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', align: 'center', title: 'ID', sort: true, fixed: 'left'}
                //, {field: 'type', align: 'center', title: '用户名'}
                , {field: 'numOfPeriods', align: 'center', title: '期数'}
                , {field: 'redNum1', width: '5%', align: 'center', title: '红号1'}
                , {field: 'redNum2', width: '5%', align: 'center', title: '红号2'}
                , {field: 'redNum3', width: '5%', align: 'center', title: '红号3'}
                , {field: 'redNum4', width: '5%', align: 'center', title: '红号4'}
                , {field: 'redNum5', width: '5%', align: 'center', title: '红号5'}
                , {field: 'redNum6', width: '5%', align: 'center', title: '红号6'}
                , {field: 'blueNum', width: '5%', align: 'center', title: '蓝号'}
                , {field: 'drawDate', align: 'center', title: '开奖日期'}
                , {field: 'exDate', align: 'center', title: '兑奖截止日期'}
            ]]
            , limits: [15, 20]
            , limit: 15
        });

        let $ = layui.$, active = {
            reload: function () {
                let numOfPeriods = $('#numOfPeriods');

                //执行重载
                table.reload('demo', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        numOfPeriods: numOfPeriods.val()
                    }
                }, 'data');
            }
        };

        $('#search_button').click(function () {
            let type = $(this).data('type');
            console.log(111, type);
            active[type] ? active[type].call(this) : '';
        });

        $('#clear_button').click(function () {
            $('#numOfPeriods').val('');
            $('#search_button').trigger('click');
        });

        $('#sync_remote_button').click(function () {
            let loading = layer.load(0, {
                shade: false,
                time: 2 * 1000
            });
            $.ajax({
                url: '/api/lottery/history/sync/remote',
                type: 'put',
                data: {},
                /*是否异步*/
                async: true,
                /*返回的数据类型*/
                dataType:"json",//返回数据类型
                /*这个值是默认的传参方式, 默认可以不指定, 只有传递json时需要指定*/
                contentType: 'application/x-www-form-urlencoded',
                success: function (response) {
                    layer.close(loading);
                    if (response.code === 200) {
                        layer.open({
                            title: '同步成功'
                            ,content: response.message
                        });
                        $('#search_button').trigger('click');
                    } else {
                        layer.open({
                            title: '同步失败'
                            ,content: response.message
                        });
                    }
                }
            });
        });
    });
</script>
</body>
</html>